<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="结算明细" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="mxform"
                :model="mxForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="运单号" prop="codes">
                  <el-input
                    v-model="CodesString"
                    placeholder="请输入单号,多个订单号逗号隔开"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="业务日期" style="width: 600px" prop="time">
                  <!-- <dateymd :data="mxTime" @changeymd="mxtime" /> -->
                  <el-date-picker
                    v-model="mxTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="mxtime"
                  />
                  <!-- <el-date-picker v-model="mxForm.time" value-format="yyyy-mm-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="mxtime" /> -->
                </el-form-item>
                <el-form-item label="业务员名称" prop="salesmanId">
                  <el-input
                    v-model="mxForm.salesmanId"
                    placeholder="请输入业务员名称"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="mxSubmit">查询</el-button>
                  <el-button class="cz" @click="mxClear">重置</el-button>
                </el-form-item>

                <el-form-item label="客户名称" prop="clientId">
                  <el-input
                    v-model="mxForm.clientId"
                    placeholder="请输入客户名称"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="异常数据" prop="abnormalDataId">
                  <el-select
                    v-model="mxForm.abnormalDataId"
                    placeholder="请选择结算对象"
                    style="width: 500px"
                  >
                    <el-option
                      v-for="(item, index) in ycdata"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ mxtableData.length }}</span
              >项
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="mxloading"
                :data="mxtableData"
                :th="mxth"
                :n="3"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="mxForm.pageDate.pageNum"
            :page-size="mxForm.pageDate.pageSize"
            :total="mxtotal"
            @size-change="mxhandleSizeChange"
            @current-change="mxhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="结算汇总" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="hzform"
                :model="hzForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="汇总维度">
                  <el-select
                    v-model="hzForm.collectType"
                    placeholder="请选择汇总维度"
                    style="width: 286px"
                    @change="wdchange"
                  >
                    <el-option label="日汇总" :value="1" />
                    <el-option label="月汇总" :value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间范围" style="width: 600px">
                  <div class="flex">
                    <el-date-picker
                      v-show="hzForm.collectType == 2"
                      v-model="hzForm.hzMonth"
                      value-format="yyyy-MM"
                      type="monthrange"
                      placeholder="选择月"
                      range-separator="至"
                      style="width: 672px"
                      start-placeholder="开始月份"
                      end-placeholder="结束月份"
                      @change="hzmonth"
                    />

                    <el-date-picker
                      v-show="hzForm.collectType == 1"
                      v-model="hzForm.hzTime"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 672px"
                      @change="hztime"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="业务员名称">
                  <el-input
                    v-model="hzForm.salesmanId"
                    placeholder="请选择账单类型"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="hzSubmit">查询</el-button>
                  <elbutton :obj="hzForm" @dj="hzClear(hzForm)" />
                </el-form-item>
                <el-form-item label="客户名称">
                  <el-input
                    v-model="hzForm.clientId"
                    placeholder="请选择账单对象"
                    style="width: 286px"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ hztableData.length }}</span
              >项
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="multipleTable"
                :loading="hzloading"
                :data="hztableData"
                :th="hzth"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="hzForm.pageDate.pageNum"
            :page-size="hzForm.pageDate.pageSize"
            :total="hztotal"
            @size-change="hzhandleSizeChange"
            @current-change="hzhandleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getOutletsList, searchSywy, allUpdateSywy } from '@/api/dashboard'
export default {
  data() {
    return {
      show: 1,
      mxloading: false,
      hzloading: false,
      // 网点
      networkList: [],
      activeName: 'first',
      //   明细表单
      mxth: [],
      mxForm: {
        abnormalDataId: '',
        clientId: '',
        codes: [],
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        salesmanId: '',
        startTime: ''
      },
      //   汇总表单
      hzth: [],
      hzForm: {
        clientId: '',
        collectType: 1,
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        salesmanId: '',
        startTime: '',
        startMonth: '',
        endMonth: ''

      },
      // 明细表格
      mxtableData: [],
      mxtotal: 0,
      mxTime: [],
      // 汇总表格
      hztableData: [],
      hztotal: 0,
      hzTime: [],
      hzMonth: [],
      // 异常数据
      ycdata: [
        { value: 1, label: '结算对象为空' },
        { value: 2, label: '结算时间为空' },
        { value: 3, label: '目的地为空' },
        { value: 4, label: '结算重量为0' },
        { value: 5, label: '始发地为空' },
        { value: 6, label: '未获取到报价' },
        { value: 7, label: '结算异常' },
        { value: 8, label: '未找到对应产品类型报价' }
      ]
    }
  },
  computed: {
    CodesString: {
      get() {
        return this.mxForm.codes.join(',')
      },
      set(value) {
        this.mxForm.codes = value !== '' ? value.split(',').map(item => item.trim()) : []
      }
    }
  },
  created() {
    this.getOutLet()
  },
  methods: {
    // 获取明细的时间
    mxtime(value) {
      if (value != null) {
        this.mxForm.startTime = value[0]
        this.mxForm.endTime = value[1]
      } else {
        this.mxForm.startTime = ''
        this.mxForm.endTime = ''
      }
    },
    // 获取汇总的时间
    hztime(value) {
      if (value != null) {
        this.hzForm.startTime = value[0]
        this.hzForm.endTime = value[1]
      } else {
        this.hzForm.startTime = ''
        this.hzForm.endTime = ''
      }
    },
    // 获取汇总月份
    hzmonth(value) {
      if (value != null) {
        this.hzForm.startMonth = value[0]
        this.hzForm.endMonth = value[1]
      } else {
        this.hzForm.startMonth = ''
        this.hzForm.endMonth = ''
      }
    },
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 明细查询
    mxSubmit() {
      if (this.mxForm.startTime === '' || this.mxForm.endTime === '') {
        this.$message('请选择时间')
        return
      }
      this.mxloading = true
      searchSywy(this.mxForm).then(res => {
        console.log('明细表格', res)
        if (res.code === 200) {
          this.mxtableData = res.data.list.data
          this.mxtotal = res.data.list.total
          this.mxth = res.data.fields
        } else {
          this.mxth = []
          this.mxtableData = []
          this.mxtotal = 0
        }
      })
      this.mxloading = false
    },
    async hzSubmit() {
      if (this.hzForm.startMonth === '' && this.hzForm.startTime === '') {
        this.$message('请选择时间')
        return
      }
      this.hzloading = true
      const res = await allUpdateSywy(this.hzForm)
      console.log('汇总表格', res)
      if (res.code === 200) {
        this.hztableData = res.data.list.data
        this.hztotal = res.data.list.total
        this.hzth = res.data.fields
      } else {
        this.hzth = []
        this.hztableData = []
        this.hztotal = 0
      }
      this.hzloading = false
    },
    handleClick(tab, event) {
      this.show = 1
      this.hzForm.collectType = 1
    },
    // 明细分页
    mxhandleSizeChange(value) {
      this.mxForm.pageDate.pageSize = value
      this.mxForm.pageDate.pageNum = 1
      this.mxSubmit()
    },
    mxhandleCurrentChange(value) {
      this.mxForm.pageDate.pageNum = value
      this.mxSubmit()
    },

    // 汇总分页
    hzhandleSizeChange(value) {
      this.hzForm.pageDate.pageSize = value
      this.hzForm.pageDate.pageNum = 1
      this.hzSubmit()
    },
    hzhandleCurrentChange(value) {
      this.hzForm.pageDate.pageNum = value
      this.hzSubmit()
    },
    hzClear(aaa) {
      this.hzForm = aaa
      this.hzForm.collectType = 1
    },
    wdchange(val) {
      // console.log(val)
      this.show = val
      this.hzTime = []
      this.hzMonth = []
      this.hzForm.startTime = ''
      this.hzForm.endTime = ''
      this.hzForm.startMonth = ''
      this.hzForm.endMonth = ''
    },
    mxClear() {
      this.mxTime = []
      this.mxForm.startTime = ''
      this.mxForm.endTime = ''
      this.$refs.mxform.resetFields()
    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.page > span {
  color: #2087d0;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
</style>
